<template>
  <div class="home">
    <div class="top">
      <div class="swiper">
        <ul @mouseenter="stop(timer)" @mouseleave="start">
          <li :class="[num==index?'active':'']" v-for="(item,index) in imgList" :key="index">
            <a>
              <img :src="'http://39.99.204.24:18011/guns/kaptcha/'+item.imgUrl" alt="轮播图" />
            </a>
          </li>
          <div class="docter">
            <span
              :class="[num==item-1?'active-doct':'']"
              @click="change(item)"
              v-for="item in imgList.length"
              :key="item"
            >{{item}}</span>
          </div>
        </ul>
      </div>
      <div class="textBox">
        <div class="title">
          <h3>课程介绍</h3>
          <img @click="goMenu('2','7','课程介绍')" src="../assets/more.png" alt />
        </div>
        <p class="textBox-content">
          <span v-html="textBox"></span>
          <span style="color:#808080" v-if="!textBox">暂无数据~</span>
          <!-- {{textBox.length>=236? textBox.substring(0,236):textBox}}... -->
        </p>
        <a class="textbox-btn-a" v-show="textBox.length>0" @click="goMenu('2','7','课程介绍')">[详细内容]</a>
      </div>
      <div class="team">
        <div class="title">
          <h3>教学团队</h3>
          <img @click="goMenu('3','18','教学团队')" src="../assets/more.png" alt />
        </div>
        <div class="tree-swiper" @mouseenter="stop(goTimer)" @mouseleave="tree">
          <ul ref="treeUl">
            <li v-for="item in teams" :key="item.index">
              <a>
                <img :src="'http://39.99.204.24:18011/guns/kaptcha/'+item.titleImg" alt />
                <span>{{item.content.length>=26? item.content.substring(0,26):item.content}}...</span>
              </a>
            </li>
            <!-- 辅助无缝轮播 -->
            <li v-for="item in teams" :key="item.index">
              <a>
                <img :src="'http://39.99.204.24:18011/guns/kaptcha/'+item.titleImg" alt />
                <span>{{item.content.length>=26? item.content.substring(0,26):item.content}}...</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="left mbox">
        <div class="title">
          <span class="icon1"></span>
          <h3>教学指南</h3>
          <img @click="goMenu('4','45','教学指南')" src="../assets/more.png" alt />
        </div>
        <div class="main-list">
          <ul>
            <li
              @click="goListInfo('4',item.id,'教学指南')"
              v-for="item in leftList.slice(0,6)"
              :key="item.id"
            >
              <a>{{item.title}}</a>
            </li>
            <p v-if="leftList.length==0" style="font-size:12px;color:#808080">暂无数据~</p>
          </ul>
        </div>
      </div>
      <div class="center mbox">
        <div class="title">
          <span class="icon2"></span>
          <h3>课程课件</h3>
          <img @click="goMenu('4','43','课程课件')" src="../assets/more.png" alt />
        </div>
        <div class="main-list">
          <ul>
            <li
              @click="goListInfo('4',item.id,'课程课件')"
              v-for="item in centerList.slice(0,6)"
              :key="item.id"
            >
              <a>{{item.title}}</a>
            </li>
            <p v-if="centerList.length==0" style="font-size:12px;color:#808080">暂无数据~</p>
          </ul>
        </div>
      </div>
      <div class="right mbox">
        <div class="title">
          <span class="icon3"></span>
          <h3>教学录像</h3>
          <img @click="goMenu('4','44','教学录像')" src="../assets/more.png" alt />
        </div>
        <div class="main-list">
          <ul>
            <li
              @click="goListInfo('4',item.id,'教学录像')"
              v-for="item in rightList.slice(0,6)"
              :key="item.id"
            >
              <a>{{item.title}}</a>
            </li>
            <p v-if="rightList.length==0" style="font-size:12px;color:#808080">暂无数据~</p>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: "", //轮播定时器
      num: 0,
      treeY: 0, //树形偏移量
      goTimer: "", //动画go的定时器
      imgList: [],
      textBox: "",
      teams: [],
      leftList: [],
      centerList: [],
      rightList: [],
      kcjsId: "48" //课程介绍文章id
    };
  },
  mounted() {
    this.swiper();
    this.getImgList();
    this.getTextContent();
    this.getTeam();
    this.getLeftList();
    this.getCenterList();
    this.getRightList();
  },
  methods: {
    goMenu(id,listId,name) {
      this.$router.push({
        path: "/about/"+id,
        query:{name,listId}
      });
    },
    //从列表跳转详情
    goListInfo(id, textId, name) {
      console.log(textId);
      this.$router.push({
        path: "/about/" + id,
        query: {
          textId,
          name
        }
      });
    },
    //教学指南
    getLeftList() {
      this.$axios.post("/OpenApi/articleList/45").then(res => {
        this.leftList = res.data;
      });
    },
    //课程课件
    getCenterList() {
      this.$axios.post("/OpenApi/articleList/43").then(res => {
        this.centerList = res.data;
      });
    },
    //教学录像
    getRightList() {
      this.$axios.post("/OpenApi/articleList/44").then(res => {
        this.rightList = res.data;
      });
    },
    //教学团队
    getTeam() {
      this.$axios.post("/OpenApi/articleListAndContent/18").then(res => {
        let reg = /<\/?.+?\/?>/g;
        res.data.forEach(item => {
          item.content = item.content.replace(reg, "");
        });
        this.teams = res.data;
        this.$nextTick(() => {
          this.tree();
        });
      });
    },
    //获取轮播图img
    getImgList() {
      this.$axios.post("/OpenApi/swipeList").then(res => {
        console.log("轮播图", res);
        this.imgList = res.data;
      });
    },
    //获取文章块
    getTextContent() {
      this.$axios.post("/OpenApi/article/" + this.kcjsId).then(res => {
        console.log(res);
        this.textBox = res.data.content;
        // this.textBox =
        //   "助 router 示例的方法，使用 $router.re助 router 示例的方法，使用 $router.resolve 获取地址，再通过op助 router 示例的方法，使用 $router.resolve 获取地址，再通过op助 router 示例的方法，使用 $router.resolve 获取地址，再通过opsolve 获取地址，再通过open 方法打开新窗口助 router 示例的方法，使用 $router.resolve 获取地址，再通过open 方法打开新窗口助 router 示例的方法，使用 $router.resolve 获取地址，再通过open 方法打开新窗口助 router 示例的方法，使用 $router.resolve 获取地址，再通过open 方法打开新窗口助 router 示例的方法，使用 $router.resolve 获取地址，再通过open 方法打开新窗口";
      });
    },
    //轮播
    swiper() {
      this.timer = setInterval(() => {
        this.num++;
        if (this.num == this.imgList.length) {
          this.num = 0;
        }
      }, 2500);
    },
    change(i) {
      this.num = i - 1;
    },
    start() {
      this.swiper();
    },
    stop(timer) {
      clearInterval(timer);
      clearTimeout(timer);
    },
    //树形轮播
    tree() {
      if (this.$refs.treeUl.clientHeight / 2 <= 180) return;

      let time = 2000; //位移总时间
      let inteval = 16.7; //单次位移间隔时间
      let speed = 60 / (time / inteval); //单次位移段

      let go = () => {
        if (Math.abs(this.treeY) >= (this.$refs.treeUl.clientHeight + 5) / 2) {
          this.treeY = 0;
        } else {
          this.treeY -= speed;
        }
        this.$refs.treeUl.style.transform = `translateY(${this.treeY}px)`;
        this.goTimer = setTimeout(go, inteval);
      };
      go();
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  width: 1200px;
  margin: 20px auto;
  overflow: hidden;
  .title {
    width: 100%;
    height: 24px;
    margin-bottom: 8px;
    h3 {
      color: red;
      float: left;
    }
    img {
      float: right;
      cursor: pointer;
    }
  }
  .top {
    width: 100%;

    .swiper {
      width: 445px;
      height: 225px;
      padding: 15px;
      background: url("../assets/slide-bg.jpg");
      position: relative;
      float: left;
      ul {
        width: 445px;
        height: 225px;
        li {
          position: absolute;
          opacity: 0;
          width: 445px;
          height: 225px;
          transition: all 0.5s linear;
          -webkit-transition: all 0.5s linear;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .active {
          opacity: 1;
        }
        .docter {
          position: absolute;
          bottom: 18px;
          right: 18px;
          z-index: 99;
          span {
            width: 20px;
            height: 20px;
            display: inline-block;
            background-color: rgba(0, 0, 0, 0.7);
            color: #fff;
            cursor: pointer;
            font-size: 12px;
            line-height: 20px;
            margin-left: 2px;
          }
          .active-doct {
            background-color: rgba(rgb(255, 136, 0), 0.7);
          }
        }
      }
    }
    .textBox {
      width: 365px;
      height: 225px;
      float: left;
      background: url("../assets/area1-bg.jpg");
      padding: 15px;
      p {
        float: left;
        font-size: 12px;
        line-height: 24px;
        text-align: left;
      }
      .textBox-content {
        overflow: hidden;
        /* //超出部分影藏   */
        -webkit-line-clamp: 7;
        /* //限制行数   */
        text-overflow: ellipsis;
        /* //超过部分用省略号显示   */
        display: -webkit-box;
        /*//盒子模型 */
        -webkit-box-orient: vertical;
        /* 从顶部向底部垂直布置子元素 */
        word-break: break-all;
        /* 使英文和数字也生效 */
      }
      .textbox-btn-a {
        cursor: pointer;
        display: block;
        font-size: 12px;
        float: right;
        color: rgb(160, 99, 68);
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
    .team {
      width: 280px;
      height: 225px;
      padding: 15px;
      float: right;
      background: url("../assets/area1-bg.jpg");
      .tree-swiper {
        width: 260px;
        height: 180px;
        overflow: hidden;
        ul {
          li {
            width: 100%;
            height: 50px;
            transition: all 2s linear;
            -webkit-transition: all 2s linear;
            text-align: left;
            margin-bottom: 10px;
            font-size: 12px;
            color: #606060;
            cursor: pointer;
            img {
              width: 70px;
              height: 50px;
              float: left;
              margin-right: 10px;
            }
            a {
              span {
                line-height: 25px;
                width: 180px;
                height: 50px;
                display: inline-block;
                overflow: hidden;
              }
            }
          }
        }
      }
    }
  }
  .main {
    width: 1160px;
    height: 160px;
    padding: 20px;
    margin-top: 20px;
    float: left;
    background: url("../assets/content-main-bg.jpg") repeat-x;
    .mbox {
      float: left;
      .title {
        border-bottom: 1px solid #909090;
        padding-bottom: 2px;
        span {
          width: 24px;
          height: 22px;
          float: left;
        }
        .icon1 {
          background: url("../assets/title-icon1.png") 50% 60%;
        }
        .icon2 {
          background: url("../assets/title-icon2.png") 50% 60%;
        }
        .icon3 {
          background: url("../assets/title-icon3.png") 50% 60%;
        }
      }
    }
    .left {
      width: 380px;
    }
    .center {
      width: 450px;
      margin: 0 20px;
    }
    .right {
      width: 290px;
    }
    .main-list {
      text-align: left;
      margin-top: 10px;
      ul {
        li {
          list-style-type: disc;
          height: 21px;
          color: rgb(230, 117, 38);
          clear: both;
          margin-left: 20px;
          a {
            color: #383838;
            font-size: 12px;
            cursor: pointer;
            &:hover {
              color: rgb(230, 117, 38);
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
}
</style>
